<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-23 10:09:44
 * @LastEditDate: Do not exit
-->
<template>
  <div>
    <el-container>
        <el-header>
            <div class="left">
                <img src="@/assets/images/logo_zpl.jpg" alt="">
            </div>
            <div class="right">
                <img src="@/assets/images/login2.jpg" alt="">
            </div>
        </el-header>
        <el-main>
            <div class="lm">
                <img src="@/assets/images/login1.jpg" alt="">
            </div>
            <div class="rm">
                <div class="rm-top">
                    <strong>会员登录</strong>
                    <el-link @click="toRe">立即注册</el-link>
                </div>
                <div class="rm-main">
                    <el-form :model="loginForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
                        <el-form-item label="账号:" prop="phone" style=" margin-bottom: 30px;">
                            <el-input placeholder="请输入手机号" v-model="loginForm.phone" style="width:280px"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:" prop="password" style=" margin-bottom: 30px;">
                            <el-input placeholder="请输入密码" v-model="loginForm.password" show-password style="width:280px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-link style="margin-left:-230px;margin-right:200px;margin-top:-50px;" @click="toMain">先去逛逛</el-link>
                            <el-link style="margin-right:-200px;margin-top:-50px;" @click="toFind">忘记密码?</el-link>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="btn" onmouseover="this.style.backgroundColor='pink';" onmouseout="this.style.backgroundColor='';" @click="toLogin('ruleForm')">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>


        </el-main>
        <el-footer>© MAKE-UP ART COSMETICS. ALL WORLDWIDE RIGHTS RESERVED.</el-footer>
    </el-container>
  </div>
</template>

<script>
import {login}from '@/api/member.js'
import ShareData from '@/utils/localStorage.js'

export default {
    data(){
        return{
            loginForm:{},
            rules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在为11个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            },
            

        }
    },
    methods:{
        toRe(){
            this.$router.push({path:'/register'});
        },
        toFind(){
            this.$router.push({path:'/find'});
        },
        toMain(){
            this.$router.push({path:"/"});
        },
        toLogin(formName){
           this.$refs[formName].validate((valid)=>{
               if(valid){
                login(this.loginForm).then(res=>{
                    console.log(res)
                    if(res.data.code==="0000"){
                        this.$message.success("登录成功")
                        ShareData.setToken(res.data.data.token);
                        ShareData.setItem("phone",this.loginForm.phone)
                        this.$router.push("/")
                    }else{
                        this.$message.error("用户或密码错误")
                    }
 
                })
               }
           })
        }
    }

}
</script>

<style scoped>
.el-header, .el-footer {
    /* background-color: #B3C0D1; */
    color: #333;
    text-align: center;
    line-height: 60px;
}
.el-main {
    background-color: #e7d0dabd;
    color: #333;
    text-align: center;
    line-height: 360px;
    display: flex;
}
.left{
    display: flex;
    justify-content: flex-start;
    margin-left: 100px;
}
.right{
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
    margin-top: -55px;
}
.left img{
    width: 200px;
    height: 60px;
}
.lm{
    margin-top: 100px;
    margin-left: 300px;
}
.rm{
    width: 400px;
    height: 430px;
    background:#fff;
    margin-top: 120px;
    margin-left: 80px;
}
.rm-top{
    margin-top: -150px;
    display: flex;
    justify-content: space-around;
}
.rm-main{
    margin-top: -100px;
    margin-left: -30px;
}
.btn{
    width: 300px;
    height: 40px;
    margin-left: -30px;
    /* margin-top: -100px; */
    background-color: rgb(168, 165, 165);
    color: #000;
}
.el-form{
    width:350px;
    margin-left: 20px;
}

</style>